<!-- 售后模板 -->
<template>
	<div>
		<el-dialog v-model="isShowDialog" :append-to-body="true" destroy-on-close :title="props.title" width="90%" draggable="">
			<el-container>
				<el-main style="padding: 10px">
					<el-card class="box-card" style="width: 100%; height: 100%">
						<div style="width: 100%; height: 100%">
							<el-button @click="handleAddTab">新增</el-button>
							<el-tabs v-model="ruleForm.tabValue" class="demo-tabs" closable @tab-remove="removeTab">
								<el-tab-pane v-for="(item, index) in ruleForm.tabList" :key="index" :name="item.value">
									<template #label>
										<span class="custom-tabs-label">
											<span>{{ item.name || item.Name }}</span>
											<el-icon style="margin-left: 5px" @click="handleEdit(item, index)"><Edit /></el-icon>
										</span>
									</template>
									<template v-if="!!item.type && parseInt(item.type) == 2">
										链接地址：
										<el-input v-model="item.linkUrl" placeholder="请输入链接地址" clearable />
									</template>
									<template v-else>
										<el-form v-model="item.from">
											<el-form-item label="标题" prop="title">
												<el-input v-model="item.from.title" placeholder="请输入标题" clearable />
											</el-form-item>
											<el-form-item label="内容" prop="content">
												<UploadDialog :list="item.from.content" :fileBase64="state.fileBase64" :DelfileUrl="state.DelfileUrl" />
											</el-form-item>
										</el-form>
									</template>
								</el-tab-pane>
							</el-tabs>
						</div>
					</el-card>
				</el-main>
				<el-aside style="padding: 10px">
					<el-card class="box-card">
						<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
							<div style="font-size: 16px; color: black; font-weight: bold">基础属性:</div>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="售后标题" prop="name">
									<el-input v-model="ruleForm.name" placeholder="请输入售后标题" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="英文标题" prop="name_En">
									<el-input v-model="ruleForm.name_En" placeholder="请输入英文标题" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="排序" prop="sort">
									<el-input-number v-model="ruleForm.sort" clearable controls-position="right" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="售后类型" prop="cms_PartType_ID">
									<el-select v-model="ruleForm.cms_PartType_ID" placeholder="请选择售后类型" style="width: 100%">
										<el-option v-for="item in state.TypeData" :key="item.id" :label="item.name" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<!-- 选择图片 -->
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<div class="resource-style-box" v-if="ruleForm.imgUrl == undefined" @click="openresourceDialog('img')">
									<img class="xz-img" src="../../../../assets/addImg.png" />
									<p>选择图片</p>
								</div>
								<div class="resource-mouse-img" @mouseenter="handleMouseEnter('img')" @mouseleave="handleMouseLeave('img')" v-else>
									<img class="mouse-img" :src="getUrl(ruleForm.imgUrl)" />
									<div class="show-mask-layer" v-if="state.showMaskLayerImg">
										<p class="mask-layer-p1" @click="openresourceDialog('img')">更换图片</p>
										<p class="mask-layer-p2" @click="delImg">删除图片</p>
									</div>
								</div>
							</el-col>
						</el-form>
					</el-card>
				</el-aside>
			</el-container>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default" :loading="state.loading">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!--修改弹窗-->
		<el-dialog v-model="state.EditDialogVisible" :append-to-body="true" destroy-on-close :title="props.title" width="70%" draggable="">
			<el-form :model="state.buttonForm" size="default" label-width="100px">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="按钮名称" prop="name">
						<el-input v-model="state.buttonForm.name" placeholder="请输入按钮名称" clearable />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="按钮名称(英)" prop="name">
						<el-input v-model="state.buttonForm.english_Name" placeholder="请输入按钮名称" clearable />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="类型" prop="type">
						<el-radio-group v-model="state.buttonForm.type" class="ml-4">
							<el-radio :label="1">图片视频</el-radio>
							<el-radio :label="2">链接</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.EditDialogVisible=false" size="default">取 消</el-button>
					<el-button type="primary" @click="handleEditComfirm" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!--新增弹窗-->
		<el-dialog v-model="state.isAddButtonDialog" :append-to-body="true" destroy-on-close :title="props.title" width="70%" draggable="">
			<el-form :model="state.buttonForm" size="default" label-width="100px">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="按钮名称" prop="name">
						<el-input v-model="state.buttonForm.name" placeholder="请输入按钮名称" clearable />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="按钮名称(英)" prop="name">
						<el-input v-model="state.buttonForm.english_Name" placeholder="请输入按钮名称" clearable />
					</el-form-item>
				</el-col>
				<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="排序" prop="value">
						<el-input v-model="state.buttonForm.value" placeholder="排序从小到大" clearable />
					</el-form-item>
				</el-col> -->
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="类型" prop="type">
						<el-radio-group v-model="state.buttonForm.type" class="ml-4">
							<el-radio :label="1">图片视频</el-radio>
							<el-radio :label="2">链接</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.isAddButtonDialog=false" size="default">取 消</el-button>
					<el-button type="primary" @click="submitButton" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<Resource :limitNum="1" :fileType="state.fileType" :remind="state.remind" ref="resourceRef" @resourceVal="resourceVal" />
	</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import type { FormRules, UploadProps } from 'element-plus';
import { getStepBodys } from '/@/api/CMS/cms_common';
import { Pagecms_Label } from '/@/api/CMS/cms_label';
import { ElMessageBox, ElMessage } from 'element-plus'; //elementUI提示
import Resource from '/@/components/resource/index.vue';
import { Addcms_Part, Editcms_Part } from '/@/api/CMS/cms_part';
import '/@/views/CMS/cms_Template/common/tempStype.css';
import Editor from '/@/components/editor/index.vue';
import UploadDialog from '/@/components/UploadDialog/index.vue';
const resourceRef = ref<InstanceType<typeof Resource>>();
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
	columnData: [] as any,
	isadd: false as any,
	node: {} as any,
});
const radio1 = ref('1');
const state = reactive({
	tabValue: 1,
	remind: '选择图片请按约4:3比例,其他比例将会影响效果！(高：3，宽：4)',
	DelfileUrl: [] as any,
	commonData: [] as any,
	fileBase64: [] as any,
	TypeData: [] as any,
	fileList: [] as any,
	imagefile: {} as any,
	showMaskLayerImg: false, //选择图片遮罩层状态
	fileType: '',
	loading: false,
	isAddButtonDialog: false, //新增按钮弹窗
	buttonForm: {} as any, //按钮配置
	EditDialogVisible : false
});

//父级传递来的函数，用于回调
const emit = defineEmits(['handleQuery']);
const ruleFormRef = ref();
const isShowDialog = ref(false);
let ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
	name: [{ required: true, message: '请输入售后标题！', trigger: 'blur' }],
	Name_En: [{ required: true, message: '请输入英文标题！', trigger: 'blur' }],
	cms_PartType_ID: [{ required: true, message: '请选择售后类型！', trigger: 'blur' }],
	// imgUrl: [{ required: true, message: '请选择售后类型！', trigger: 'blur' }],
});
const handleEdit = (item: any, index: Number) => {
	//debugger
	state.EditDialogVisible=true;
	state.buttonForm = {};
	state.buttonForm.name=item.name;
	state.buttonForm.english_Name=item.english_Name;
	state.buttonForm.index=index;
	state.buttonForm.type=item.type;
	/*ElMessageBox.prompt('名称', '名称(英)',{
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(({ value }) => {
		item.name = value;
		ElMessage.success(`修改备注成功`);
	});*/
};
const handleEditComfirm=()=> {
	//debugger
	if (!state.buttonForm.name) {
		ElMessage.error(`请输入按钮名字，再提交！`);
		return;
	}
	if (!state.buttonForm.type) {
		ElMessage.error(`请选择类型，再提交！`);
		return;
	}
	if (parseInt(state.buttonForm.type) == 1) {
		state.buttonForm.from = { title: '', content: [] };
	} else {
		state.buttonForm.linkUrl = '';
	}
	ruleForm.value.tabList[state.buttonForm.index].name=state.buttonForm.name;
	ruleForm.value.tabList[state.buttonForm.index].english_Name=state.buttonForm.english_Name;
	
	//ruleForm.value.tabList.push(state.buttonForm);
	//ruleForm.value.tabList.push(state.buttonForm);
	state.EditDialogVisible = false;
	//ElMessage.success(`修改成功`);
}
const removeTab = (name: any) => {
	const tabs = ruleForm.value.tabList;
	let activeName = ruleForm.value.tabValue;
	let findIndex = ruleForm.value.tabList.findIndex((val: any) => {
		return val.value == name;
	});
	activeName = tabs[0].value;
	if (tabs[findIndex].from && tabs[findIndex].from.content && tabs[findIndex].from.content.length > 0) {
		tabs[findIndex].from.content.forEach((val: any) => {
			state.DelfileUrl.push(val.url);
		});
	}
	ruleForm.value.tabValue = activeName;
	ruleForm.value.tabList = tabs.filter((tab: any) => {
		return tab.value != name;
	});
};
//选择图片鼠标移入显示遮罩层
const handleMouseEnter = (type: any) => {
	if (type == 'img') {
		state.showMaskLayerImg = true;
	}
};
//旋转图片鼠标移出隐藏遮罩层
const handleMouseLeave = (type: any) => {
	if (type == 'img') {
		state.showMaskLayerImg = false;
	}
};
//删除选中图片
const delImg = () => {
	ruleForm.value.imgUrl = undefined;
};
const getUrl = (url: any) => {
	return window.__env__.VITE_API_URL + url;
};
//资源管理回调
const resourceVal = (arr: any) => {
	console.log(state.fileType);
	if (state.fileType == 'img') {
		ruleForm.value.imgUrl = arr[0].shortUrl;
	}
};
// 打开弹窗
const openDialog = (row: any) => {
	state.loading = false;
	ruleForm.value.imgUrl = undefined;
	state.fileBase64 = [];
	state.DelfileUrl = [];
	ruleFormRef.value?.resetFields();
	ruleForm.value = JSON.parse(JSON.stringify(row));
	if (row.content) {
		ruleForm.value.tabList = JSON.parse(row.content);
		ruleForm.value.tabList.forEach((val: any) => {
			if (!val.type) {
				val.type = 1;
			}
		});
		ruleForm.value.tabValue = ruleForm.value.tabList[0]?.value;
	} else {
		handleColumn(props.node);
	}
	isShowDialog.value = true;
};
const handleColumn = (node: any) => {
	ruleForm.value.tabValue = 1;
	if (node.id == '33467812270981') {
		// 产品介绍说明
		ruleForm.value.tabList = [
			{ name: '操作说明', type: 1, value: 1, from: { title: '', content: [] } },
			{ name: '零件手册', type: 1, value: 2, from: { title: '', content: [] } },
		];
	} else if (node.id == '33529967121157') {
		// 机械操作维修
		ruleForm.value.tabList = [
			{ name: '维修课件', type: 1, value: 1, from: { title: '', content: [] } },
			{ name: '维修视频', type: 1, value: 2, from: { title: '', content: [] } },
		];
	} else if (node.id == '33529977253381') {
		// 电控操作维修
		ruleForm.value.tabList = [
			{ name: '维修课件', type: 1, value: 1, from: { title: '', content: [] } },
			{ name: '故障速查', type: 1, value: 2, from: { title: '', content: [] } },
			{ name: '维修视频', type: 1, value: 3, from: { title: '', content: [] } },
		];
	} else if (node.title == '服务管家') {
		ruleForm.value.tabList = [{ name: '详情', type: 1, value: 1, from: { title: '', content: [] } }];
	} else {
		ruleForm.value.tabList = [];
	}
};
// 新增tab页名称
const handleAddTab = () => {
	state.isAddButtonDialog = true;
	state.buttonForm = {};
	state.buttonForm.type = 1;
	// ElMessageBox.prompt('新增', {
	// 	confirmButtonText: '确定',
	// 	cancelButtonText: '取消',
	// })
	// 	.then(({ value }) => {
	// 		let querey = ruleForm.value.tabList.length + 1;
	// 		ruleForm.value.tabList.push({ name: value, value: querey, from: { title: '', content: [] } });
	// 		ElMessage.success(`添加成功`);
	// 	})
	// 	.catch(() => {
	// 		ElMessage.success(`取消成功`);
	// 	});
};
const submitButton = () => {
	if (!state.buttonForm.name) {
		ElMessage.error(`请输入按钮名字，再提交！`);
		return;
	}
	if (!state.buttonForm.type) {
		ElMessage.error(`请选择类型，再提交！`);
		return;
	}
	if (parseInt(state.buttonForm.type) == 1) {
		state.buttonForm.from = { title: '', content: [] };
	} else {
		state.buttonForm.linkUrl = '';
	}
	if (!state.buttonForm.value) {
		state.buttonForm.value = ruleForm.value.tabList.length + 1;
	}
	ruleForm.value.tabList.push(state.buttonForm);
	state.isAddButtonDialog = false;
	ElMessage.success(`添加成功`);
};
const closeButton = () => {
	state.isAddButtonDialog = false;
	ElMessage.success(`取消成功`);
};
// 关闭弹窗
const closeDialog = () => {
	emit('handleQuery');
	isShowDialog.value = false;
};
// 打开资源管理弹窗
const openresourceDialog = (type: any) => {
	state.fileType = type;
	resourceRef.value?.openDialog();
};
// 取消
const cancel = () => {
	isShowDialog.value = false;
};
// 提交
const submit = async () => {
	state.loading = true;
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let querey = {} as any;
			for (let i in ruleForm.value) {
				if (i == 'tabList') {
					querey['content'] = JSON.stringify(ruleForm.value[i]);
				} else if (i != 'tabValue') {
					querey[i] = ruleForm.value[i];
				}
			}
			querey.cms_Column_ID = props.node.id;
			querey.fileBase64 = state.fileBase64;
			if (querey.id != undefined && querey.id > 0) {
				querey.delfileUrl = state.DelfileUrl;
				let res = await Editcms_Part(querey);
				ElMessage.success(`修改成功`);
				if (res.data.code == 200) {
					state.loading = false;

					closeDialog();
				} else {
					state.loading = false;
				}
			} else {
				let res = await Addcms_Part(querey);
				if (res.data.code == 200) {
					state.loading = false;
					ElMessage.success(`新增成功`);
					closeDialog();
				} else {
					state.loading = false;
				}
			}
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};

// 页面加载时
onMounted(async () => {
	handleQuery();
});
const handleQuery = async () => {
	var res = await getStepBodys();
	state.commonData = res.data.result ?? [];
	var typeres = await Pagecms_Label({});
	state.TypeData = typeres.data.result ?? [];
	ruleForm.value.columnId = 0;
};
//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
<style scoped>
:deep(.upload-demo) {
	width: 100%;
}
.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}
.demo-tabs .custom-tabs-label {
	display: flex;
	align-items: center;
}
/* .demo-tabs .custom-tabs-label .el-icon {
	display: none;
}
.custom-tabs-label:hover .el-icon {
	display: block;
} */
.demo-tabs .custom-tabs-label span {
	vertical-align: middle;
	margin-left: 4px;
}
</style>
